<script setup lang="ts">
// 导入vant组件中的按钮,并起别名
import {Button as VanButton } from 'vant'

// 导入stores目录下的index.ts文件
import { useUserStore } from './stores'
// 导入showToast
import { showToast } from 'vant'

// 创建store
const userStore = useUserStore()


// 导入 utils下的request方法
import  request  from './utils/request'

// 调用request发起get请求
request({
  url:'/inthepink/myUser',
  method:'get'
}).then(res=>{
  console.log(res)
})

// 创建一个函数login
function login(){
  // 调用request发起post请求
  request({
    url:'/login/password',
    method:'post',
    data:{
      // mobile 和 password参数
      mobile:'admin',
      password:'123456'
    }
  }).then(res=>{
    // 弹出 toast 提示框
    showToast('登录成功')
    
    // 调用store中的setUser方法并传入user对象
    userStore.setUser(res.data)
  })
}

</script>

<template>
<!-- 使用导入的vant按钮组件 -->
  <van-button type="primary">主要按钮</van-button>
  <!-- 使用vant组件中的加载按钮 -->
  <van-button loading>加载中</van-button>

  <!-- 测试拷贝来的store,输出user对象 -->
   <div>{{userStore.user}}</div>
  <!-- 点击登录按钮调用store中的setUser方法并传入user对象{
  token:string
  id : string
  account:string
  mobile:string
  avatar:string
} -->
  <button @click="userStore.setUser({
  token:'123456',
  id : '123456',
  account:'123456',
  mobile:'123456',
  avatar:'123456'
})">登录</button>
  
  <!-- 点击退出按钮调用store中的delUser 方法 -->
   <button @click="userStore.delUser()">退出</button>

  <hr>


  <!-- 使用request工具 -->

  <!-- 生成登录按钮,点击后调用事件函数login -->
   <button @click="login">登录666</button>




</template>

<style scoped>

</style>
